<!--  -->
<template>
<div class='category-content'>
    <div class="left">
        <ul>
            <li 
            :class="activeIndex==index?'active':''"
            v-for="(item,index) in leftData" :key="index"
            @click="changeTab(index,item.cat_id)"
            > {{item.cat_name}}</li>
        </ul>
    </div>
    <div class="right">
        
        <div class="header-img">
            <img :src="ad_img" alt="">
        </div>
        <div v-for="item in rightData" :key="item.cat_id">
            <div class="shop-title">-{{item.cat_name}}-</div>
          <div class="flex-wrap">
            <div class='shop-box' @click="gotoGoods(item)" v-for="value in item.child" :key="value.cat_id">
                <div>
                     <img :src="value.touch_icon" alt="">
                </div>
                <div >{{value.cat_name}}</div>
            </div> 
        </div>
        </div>
       
    </div>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
    // leftData:[
    //     {
    //         name:'家用电器',
    //         id:1
    //     },
    //      {
    //         name:'男装女装',
    //         id:1
    //     },
    //      {
    //         name:'鞋靴箱包',
    //         id:1
    //     },
    //      {
    //         name:'手机数码',
    //         id:1
    //     },
    //      {
    //         name:'电脑办公',
    //         id:1
    //     },
    //      {
    //         name:'家居家纺',
    //         id:1
    //     },
    //      {
    //         name:'个人化妆',
    //         id:1
    //     },
    //      {
    //         name:'休闲运动',
    //         id:1
    //     },
    // ],
    activeIndex:'',
    ad_img:'https://x.dscmall.cn/storage/data/touch_catads/15630384831872.jpg'
};
},
//监听属性 类似于data概念
computed: {
    leftData(){
        return this.$store.state.categoryLeftDatas
    },
     rightData(){
        return this.$store.state.categoryRightDatas
    }
},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
changeTab(index,id){
    this.activeIndex = index;
    this.$store.dispatch('categoryRightData',id);
    this.ad_img = this.leftData[index].touch_catads
},
gotoGoods(item){
    this.$router.push("/goods/"+ item.cat_id + "?title=" + item.cat_name)
}
},
beforeCreate() {}, //生命周期 - 创建之前
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
beforeMount() {}, //生命周期 - 挂载之前
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
    this.$store.dispatch('categoryLeftData')
    this.$store.dispatch('categoryRightData',858)
},
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
.category-content{
    height: calc(100%-4.4rem-4.9rem);
    position: absolute;
    top: 4.4rem;
    left:0;
    bottom: 4.9rem;
    right: 0;
    background: #fff;
    display: flex;
    overflow-y: scroll;
    height: calc(100% - 4.4rem - 4.9rem);
    .left{
       width:8.5rem;
       height: 100%;
       background-color: #f4f4f4;
       ul{
        li{
            height: 3.8rem;
            line-height: 3.8rem;
            text-align: center;
            color: #999;
            font-size: 1.3rem;
        }
        .active{
            background: #fff;
            color:#f23030;
            display: flex;
            &::before{
            content:'';
            display:block;
            width: 2px;
            height: 2rem;
            background-color: #f23030;
            margin-right:1rem;
            margin-top:1rem;
        }
        }
        
       }

    }
    .right{
        padding:1rem 1rem;
        width:100%;
        box-sizing: border-box;
        .header-img{
            width: 29rem;
            height: 9rem;
            margin-bottom: 2rem;
            img{
                width: 100%;
                height: 100%;
            }
        }
         .shop-title{
                text-align: center;
                color: #333;
                margin-bottom: 1.5rem;
            }
        .shop-box{
            width:9rem;
            height:8.2rem;
            text-align: center;
           
            img{
                width:5.2rem;
                height:5.2rem;
            }
            
        }
    }

}
</style>